<h1><%= t '.title' %></h1>

<div id="spectrum"></div>

<% if @fragment_candidates.size > 0 %>
<div id="peaks">
  <ol id="peak-navi">
    <% @fragment_candidates.group_by(&:peaknum).each do |peaknum, fragments| %>
    <li class="tab"><%= link_to("Peak #{peaknum}", "#peak-#{peaknum}") %></li>
    <% end %>
  </ol>

  <% form_for(@job, :html => { :id => "fragment-selection" }) do |f| %>
  <ol>
    <% @fragment_candidates.group_by(&:peaknum).each do |peaknum, fragments| %>
    <li id="peak-<%= peaknum %>" class="peak">
      <%= render :partial => 'peak', :locals => { :peaknum => peaknum, :fragments => fragments } %>
    </li>
    <% end %>
    <li><%= f.submit(t('generic.save')) %></li>
  </ol>
  <% end %>
</div>
<% else %>
<span class="no-fragment-candidates"><%= t '.no_candidates' %></span>
<% end %>


<% content_for :javascript do %>
$(document).ready(function() {
  $('.progressbar').progressBarify();
  $('#peaks').tabs({ idPrefix: 'peak'});
  Spectrum("spectrum", 960, 300, <%= @peaks.to_json %>);
});
<% end %>
